<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>Popup</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *,
        :after,
        :before {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
        }

        .popup {
            width: 280px;
            padding: 1em;
            font-size: 13px;
            line-height: 1.5;
        }

        input[type=text] {
            font-size: 13px;
            height: 22px;
            line-height: 22px;
            padding: 0 3px;
        }

        input[type=checkbox] {
            margin: 0;
            vertical-align: middle;
        }

        .input-title {
            font-size: 14px;
        }

        #urlInput {
            width: 100%;
            margin: 8px 0 5px;
        }

        .rec-title {
            font-size: 14px;
            margin: 12px 0 6px;
            border-top: 1px solid #d5d5d5;
            padding-top: 10px;
        }

        .rec-table {
            border-spacing: 0;
        }

        .rec-table td {
            padding-left: 0;
        }

        .rec-item {
            color: #4d4dff;
        }

        .set-btn {
            cursor: pointer;
            color: #bbbbff;
            margin-left: 15px;
        }

        .set-btn:hover {
            color: #0026ff;
        }
    </style>
</head>

<body>
    <div class="popup">
        <div class="input-title">新建标签页时显示自定义网页：</div>
        <input id="urlInput" type="text" placeholder="输入网页地址即可" />
        <span>在iframe中打开：</span><input id="urlCheckbox" type="checkbox" />
        <label for="urlCheckbox" style="font-size:11px;color:#999;">拒绝连接时尝试关闭此项</label>

        <div class="rec-title">推荐设置：</div>
        <table class="rec-table">
            <tr>
                <td><span class="rec-item">欢迎页</span></td>
                <td><span id="setWelcome" class="set-btn">立即设置</span></td>
            </tr>
            <tr>
                <td><span class="rec-item">空白页</span></td>
                <td><span id="setEmpty" class="set-btn">立即设置</span></td>
            </tr>
        </table>
    </div>
    <script src="popup.js"></script>
</body>

</html>